:root { --primary-color: var(--primary, #2D862D); --secondary-color: var(--secondary, #000); } /* <!-- area page --> */ body:has(#--area) { &>section[aria-label="property search hero"].--hide, #quicksearch-section.--hide { display: none; } #content, #sidebar { margin-top: 30px; } #--areaMap { width: 100%; min-height: 500px; } #--area { container-type: inline-size; .--area-nav { margin-bottom: 32px; display: grid; gap: 16px; @container (width>550px) { grid-template-columns: repeat(2, 1fr); } @container (width>900px) { grid-template-columns: repeat(4, 1fr); } &>a.area-nav-link { display: block; color: var(--primary-color); background-color: transparent; border: 1px solid var(--primary-color); text-align: center; font-weight: bold; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; transition: 300ms ease; position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 8px; line-height: 1; min-height: 42px; &::before { content: ''; position: absolute; top: 0; left: 0; width: 23px; height: 100%; z-index: 2; background-color: var(--primary-color); opacity: 0; transition: 300ms ease; } svg { height: 24px; width: 24px; padding: 8px; border-right: 1px solid; background-color: var(--primary-color); color: #fff; transition: 300ms ease; position: relative; z-index: 3; } span { position: relative; z-index: 3; } &:hover { color: #fff; &::before { opacity: 1; width: 100%; } } } } .--areaSearches { display: grid; gap: 16px; margin-block: 32px; @container (width>550px) { grid-template-columns: repeat(2, 1fr); } details.new-accordion summary.new-accordion-title::-webkit-details-marker { display: none } details.new-accordion { overflow: hidden } details.new-accordion summary.new-accordion-title { position: relative; z-index: 2 } details.new-accordion[open]>:not(summary.new-accordion-title) { color: inherit; border-left: none !important; border-right: none !important } details.new-accordion summary.new-accordion-title::after { transform-origin: center; transition: .2s transform ease; content: '\f00d'; font-family: FontAwesome; color: #000; font-size: 16px; line-height: 1rem; transform: rotate(-45deg); } details.new-accordion[open]>summary.new-accordion-title::after { transform: rotate(90deg); transition: transform ease 1s } summary.new-accordion-title { border: 1px solid transparent; border-bottom-color: #D7D7D7; outline: none; padding: 16px; display: block; padding-left: 0; position: relative; cursor: pointer; transition: 300ms ease; color: #000; font-size: 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px; } details.new-accordion[open] summary.new-accordion-title, summary.new-accordion-title:hover { padding-left: 16px; background: #f8f8f8; } .new-accordion-content { padding: 10px; border: 1px solid #D7D7D7; border-top: none; background-color: #f8f8f8; } .new-accordion-content ul.list { display: grid; gap: 8px; list-style-type: none; li { width: auto !important; margin: 0; a { display: block; transition: 300ms ease; &:hover { color: #000; } } } @media (width>768px) { &.two_column { grid-template-columns: repeat(2, minmax(0, 1fr)) } } } } .--areaSearchesFull { margin-block: 32px; details.new-accordion summary.new-accordion-title::-webkit-details-marker { display: none } details.new-accordion { overflow: hidden; width: fit-content; } &.--full { details.new-accordion { width: 100%; } } details.new-accordion summary.new-accordion-title { position: relative; z-index: 2 } details.new-accordion[open]>:not(summary.new-accordion-title) { color: inherit; border-left: none !important; border-right: none !important } details.new-accordion summary.new-accordion-title::after { transform-origin: center; transition: .2s transform ease; content: '\f00d'; font-family: FontAwesome; color: #000; font-size: 16px; line-height: 1rem; transform: rotate(-45deg); } details.new-accordion[open]>summary.new-accordion-title::after { transform: rotate(90deg); transition: transform ease 1s } summary.new-accordion-title { border: 1px solid transparent; border-bottom-color: #D7D7D7; outline: none; padding: 16px; display: block; padding-left: 0; position: relative; cursor: pointer; transition: 300ms ease; color: #000; font-size: 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px; } details.new-accordion[open] summary.new-accordion-title, summary.new-accordion-title:hover { padding-left: 16px; background: #f8f8f8; } .new-accordion-content { padding: 10px; border: 1px solid #D7D7D7; border-top: none; background-color: #f8f8f8; } .new-accordion-content ul.list { display: grid; gap: 8px; list-style-type: none; li { width: auto !important; margin: 0; a { display: block; transition: 300ms ease; &:hover { color: #000; } } } @media (width>768px) { &.two_column { grid-template-columns: repeat(2, minmax(0, 1fr)) } } } } } } .mce-content #listings { .pt-listing-image-container { padding-top: 79%; } .mt-listing-image { margin-top: -79.28%; display: block; } .pt-listing-image-container-small { padding-top: 49%; } .mt-listing-image-small { margin-top: -49.28%; } } .--loader { position: relative; transition: 500ms ease; &::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #E2E2E2; transition: 500ms ease; opacity: 0; } * { position: relative; transition: 500ms ease; opacity: 1; z-index: 2; } } .--loading { &::before { z-index: 3; opacity: 1; } * { z-index: 1; opacity: 0; } } .miranda-wrapper { .--area-nav { margin-top: 16px; border-top: 1px solid #ddd; padding-top: 16px; } .--areaSearches { ul.list { li { padding: 0; a { color: var(--primary-color); transition: 300ms ease; &:hover { color: var(--secondary-color); } } } } } } /* <!-- market reports --> */ #--market { container-type: inline-size; .--area-nav { margin-bottom: 32px; display: grid; gap: 16px; @container (width>550px) { grid-template-columns: repeat(2, 1fr); } @container (width>900px) { grid-template-columns: repeat(3, 1fr); } &>a.area-nav-link { display: block; color: var(--primary-color); background-color: transparent; border: 1px solid var(--primary-color); text-align: center; font-weight: bold; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; transition: 300ms ease; position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 8px; line-height: 1; min-height: 42px; &::before { content: ''; position: absolute; top: 0; left: 0; width: 23px; height: 100%; z-index: 2; background-color: var(--primary-color); opacity: 0; transition: 300ms ease; } svg { height: 24px; width: 24px; padding: 8px; border-right: 1px solid; background-color: var(--primary-color); color: #fff; transition: 300ms ease; position: relative; z-index: 3; } span { position: relative; z-index: 3; } &:hover { color: #fff; &::before { opacity: 1; width: 100%; } } } } } /* <!-- sidebar --> */ .sidebar-link a, .new-accordion-content a { color: var(--secondary-color); transition: 300ms ease; &:hover { color: var(--primary-color); } } #featured-agent-group { display: none; } .sidebar-nav { display: grid; gap: 16px; margin-top: 16px; .sidebar-nav-link { border: 1px solid transparent; border-bottom-color: #D7D7D7; outline: none; padding: 16px; display: block; padding-left: 0; position: relative; cursor: pointer; transition: 300ms ease; color: #000; font-size: 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px; em span { display: none; } &:hover { padding-left: 16px; padding-right: 8px; background: #f8f8f8; } } } details.new-accordion summary.new-accordion-title::-webkit-details-marker { display: none } details.new-accordion { overflow: hidden } details.new-accordion summary.new-accordion-title { position: relative; z-index: 2 } details.new-accordion[open]>:not(summary.new-accordion-title) { color: inherit; border-left: none !important; border-right: none !important } details.new-accordion summary.new-accordion-title::after { transform-origin: center; transition: .2s transform ease; content: '\f00d'; font-family: FontAwesome; color: #000; font-size: 16px; line-height: 1rem; transform: rotate(-45deg); } details.new-accordion[open]>summary.new-accordion-title::after { transform: rotate(90deg); transition: transform ease 1s } summary.new-accordion-title { border: 1px solid transparent; border-bottom-color: #D7D7D7; outline: none; padding: 16px; display: block; padding-left: 0; position: relative; cursor: pointer; transition: 300ms ease; color: #000; font-size: 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px; } details.new-accordion[open] summary.new-accordion-title, summary.new-accordion-title:hover { padding-left: 16px; background: #f8f8f8; } .new-accordion-content { padding: 10px; border: 1px solid #D7D7D7; border-top: none; background-color: #f8f8f8; } .new-accordion-content ul.list { display: grid !important; gap: 1rem; li { width: auto !important; margin: 0; } @media (width>768px) { &.two_column { grid-template-columns: repeat(2, minmax(0, 1fr)) } } } /* card */ .contact-card { box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .15); border-radius: 1rem; width: min(350px, 100%); position: relative; margin: auto; transition: 250ms ease; padding-top: 1rem; p.cardHeader { color: #000; font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 8px; } } .contact-card::before { content: ""; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 50%; background: linear-gradient(to top, #f6f6f6, transparent); transition: 250ms ease; border-radius: 1rem } .contact-card:hover { cursor: pointer; box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .15), 0 .25rem 0 0 var(--secondary-color) } .contact-card:hover:before { height: 100% } .contact-card>* { position: relative; z-index: 2 } .contact-card img { margin: auto; object-position: top; height: unset !important; padding-left: 1rem; padding-right: 1rem; display: flex } .contact-card h2.agent-name { margin: 0; margin-top: 1rem; margin-bottom: 1.25em; text-align: center; text-transform: uppercase; letter-spacing: 2px } .contact-card .contact-bar { display: grid; grid-template-columns: 1fr 1fr } .contact-card .contact-bar>a { text-align: center; padding: .5rem; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; transition: 250ms ease; backface-visibility: hidden } .contact-card .contact-bar>a:hover { transform: scale(.95); color: #fff !important } .contact-card .contact-bar>a:target { transform: scale(.95); color: #fff !important } .contact-card .contact-bar>a:focus { transform: scale(.95); color: #fff !important } .contact-card .contact-bar>a { background: var(--primary-color); color: #fff !important } .contact-card .contact-bar>a:nth-child(2) { background: var(--secondary-color); color: #fff !important } .contact-card .social-bar { display: flex; justify-content: space-evenly; align-items: center; padding-block: 1rem } .contact-card .social-bar>a { padding: .5rem; display: inline-block; transition: 250ms ease; border-radius: .5rem; color: var(--primary-color); line-height: 1; svg { height: 20px; width: 20px; } } .contact-card .social-bar>a:hover { color: #fff !important } .contact-card .social-bar>a.facebook-icon:hover { background-color: #3b5999 } .contact-card .social-bar>a.instagram-icon:hover { background-color: #e4405f } .contact-card .social-bar>a.twitter-icon:hover { background-color: #55acee } .contact-card .social-bar>a.youtube-icon:hover { background-color: #cd201f } .contact-card .social-bar>a.linkedin-icon:hover { background-color: #0077b5 } .contact-card .social-bar>a.pinterest-icon:hover { background-color: #c8232c } .contact-card .social-bar>a.google-icon:hover { background-color: #4285f4 } .contact-card .social-bar>a.tiktok-icon:hover { background-color: #ff0050 } .contact-card .social-bar>a.zillow-icon:hover { background-color: #006AFF; } .contact-card .social-bar>a span { display: none } .contact-card .social-bar em { width: 1rem; height: 1rem; font-size: 1rem; display: flex; justify-content: center; align-items: center } .lender-card .contact-details { text-align: center } .mce-sidebar-content .lender-card h2 { border: none; padding: 0 } .contact-card.lender-card .contact-bar { margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center } .contact-card.lender-card .contact-bar>a { flex-grow: 1 } .lender-card .contact-logo { padding-bottom: 1rem } .lender-card .contact-logo p { margin: 0 } .miranda-wrapper { .sidebar { .contact-card { margin-bottom: 32px; } .mortgage_calculator { margin-top: 32px !important; } } } /* <!-- rg fixes --> */ body:not(.home) { header { #mobile-menu { .bg-palette-navigationBackground-color { background-color: var(--palette-navigationBackground-color) !important; } .text-palette-navigationLink-color { color: var(--palette-navigationLink-color) !important; } } } header { transition: 300ms ease; } header:not(.transparent) { box-shadow: 0 1px 8px rgb(0, 0, 0, 0.15); #nav-links a, #nav-icons button { color: var(--palette-navigationLink-color); } } nav.top-nav .user-contact-icons { li { @media (width>450px) { height: auto; } } svg { width: 25px; height: 25px; vertical-align: middle; } } } .miranda-wrapper { .main-footer { background: #fff; p { margin: 0; color: #000; a { color: var(--primary-color); transition: 300ms ease; &:hover { color: var(--secondary-color); } } } a { color: var(--primary-color); transition: 300ms ease; &:hover { color: var(--secondary-color); } } .footer-section:last-child h3 { color: #000; } } } .search-results .sub-bar svg { margin-right: 8px; } .sidebar-wrapper .sidebar-links-container{display: none;}body > footer > div.flex.flex-col.sm\:flex-row.w-full.px-4.sm\:px-9.xl\:px-40 > ul{display: none;}